<template>
  <!-- 播放页面 -->
  <div class="my-play">
    <!-- 分成左右两个部分，左边视频和评论，右边相关推荐和弹幕列表 -->
    <ElRow>
      <ElCol :span="18">
        <!-- 左边部分 -->
        <div class="left">
          <!-- 视频部分 -->
          <div class="left-top">
            <!-- 标题 -->
            <p class="title">{{video.title}}</p>
            <!-- 分类时间 -->
            <div class="detail-1">
              <span class="classify">{{video.type1Name}}>{{video.type2Name}}</span>
              <span class="time">{{video.uploadTime}}</span>
            </div>
            <!-- 播放量、声明 -->
            <div class="detail-2">
              <span class="play-num">播放量：{{video.playNum}}</span>
              <span class="statement">未经作者许可，禁止转载</span>
            </div>
            <!-- 播放器 -->
            <div class="player">
              <!-- <video :src="videoSrc" controls="controls" style="height:100%;width:100%"></video> -->
              <div id="video" style="width: 100%; height: 100%;"></div>
            </div>
            <!-- 操作列表 -->
            <div class="opt">
              <ul>
                <li>
                  <span @click="praise(1)" v-if="!isPraise" class="opt-btn">点赞</span>
                  <span @click="praise(0)" v-else class="opt-btn">已点赞</span>
                  {{praiseNum}}
                </li>
                <li>阔乐瓶 88</li>
                <li>
                  <span @click="collect(1)" v-if="!isCollect" class="opt-btn">收藏</span>
                  <span @click="collect(0)" v-else class="opt-btn">已收藏</span>
                  {{collectNum}}
                </li>
              </ul>
            </div>
            <!-- 视频描述 -->
            <p class="detail-title">简介</p>
            <p class="detail">{{video.detail}}</p>
            <!-- 标签，功能待定 -->
            <div class="tag"></div>
          </div>
          <!-- 评论部分 -->
          <div class="comment">
            <div class="comment-header">
              <p class="title">{{totalRow}}&nbsp;&nbsp;&nbsp;&nbsp;评论</p>
              <div class="pagination">
                <el-pagination
                  small
                  layout="prev, pager, next"
                  :total="totalRow"
                  :page-size="pageSize"
                  :current-page.sync="pageNumber"
                ></el-pagination>
              </div>
            </div>
            <!-- 评论发送框 -->
            <div class="comment-send">
              <el-row>
                <ElCol :span="4">
                  <div class="comment-photo">
                    <!-- <img :src="baseUrl+this.$store.state.user.photo||'../img/gan.png'" alt srcset> -->
                    <my-photo
                      :photo="user.photo"
                      :userName="user.userName"
                      :userId="user.id"
                      line-height="50px"
                      font-size="25px"
                    ></my-photo>
                  </div>
                </ElCol>
                <ElCol :span="20">
                  <div class="send-right">
                    <!-- <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea" resize="none"></el-input> -->
                    <!-- <textarea
                      name
                      id
                      cols="80"
                      rows="3"
                      :placeholder="'请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。'"
                      class="send-input"
                      v-model="form.content"
                    ></textarea>
                    <ElButton type="primary" class="send-btn" @click="submitComment()">发表评论</ElButton>-->
                    <div class="rate">
                       <div class="title">
                         评分：
                       </div>
                      <el-rate v-model="form.rate" show-score text-color="#ff9900"></el-rate>
                    </div>
                    <comment-post v-model="form.content" :submit="submitComment" maxlength="255"></comment-post>
                  </div>
                </ElCol>
              </el-row>
            </div>
            <!-- 评论列表 -->
            <div class="comment-list">
              <comment-item
                v-for="(item,index) in comments"
                :key="index"
                :item="item"
                :page-number="pageNumber"
                :page-size="pageSize"
                :index="index"
                :total-row="totalRow"
              ></comment-item>
              <div class="no-comment" style="text-align:center;height:100px;" v-if="comments.length<=0">
                评论空空如也...
              </div>

              <el-pagination
                background
                layout="prev, pager, next"
                :total="totalRow"
                :page-size="pageSize"
                :current-page.sync="pageNumber"
              ></el-pagination>
            </div>
          </div>
        </div>
      </ElCol>
      <ElCol :span="6">
        <!-- 右边部分-->
        <div class="right">
          <!-- 相关推荐 -->
          <div class="recommended">
            <!-- 标题 -->
            <div class="recommended-title">相关推荐</div>
            <!-- 内容项 -->
            <div
              class="recommended-item"
              v-for="(item,index) in relates"
              :key="index"
              @click="toPlay(item.id)"
            >
              <!-- 封面 -->
              <div class="img">
                <img :src="baseUrl+item.coverPhoto" alt="照片失效了" srcset="">
              </div>
              <div class="detail">
                <p class="title">{{item.title}}</p>
                <p class="author">{{item.userName}}</p>
                <p class="play">{{item.playNum}}</p>
              </div>
            </div>
          </div>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>

<script>
export default {
  name: "my-play",
  data: function() {
    return {
      textarea: "",
      id: "",
      video: {},
      videoSrc: "",
      form: {
        content: "",
        videoId: this.id,
        rate:5
      },
      comments: [], //评论列表
      pageNumber: 1,
      pageSize: 8,
      totalRow: 0,
      content: "",
      isCollect: false,
      collectNum: 0,
      isPraise: false,
      praiseNum: 0,
      baseUrl: this.GLOBAL.baseFilePath,
      relates: [],
      player: {},
      videoObject: {
        container: "#video", //“#”代表容器的ID，“.”或“”代表容器的class
        variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
        flashplayer: false, //如果强制使用flashplayer则设置成true
        loop: false, //播放结束是否循环播放
        video: "" //视频地址
      },
      
    };
  },
  created() {
    console.log("created", this.$route.query.id);
    this.id = this.$route.query.id;
  },
  mounted() {
    this.getVideoById();
    this.getCommentList();
    this.addHistoryList();

    this.player = new ckplayer(this.videoObject);
    this.videoObject.video =
      "http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4";
    this.player.newVideo(this.videoObject);
  },
  methods: {
    //获取视频数据
    getVideoById() {
      this.axios
        .post("video/getVideoById", {
          id: this.id,
          userId: this.user.id
        })
        .then(res => {
          
          this.video = res.data.video;
          this.videoSrc = this.GLOBAL.baseFilePath + this.video.video;
          this.collectNum = res.data.collectNum; //收藏数
          this.isCollect = res.data.isCollect; //是否收藏
          this.praiseNum = res.data.praiseNum; //点赞数
          this.isPraise = res.data.isPraise; //是否点赞

          this.videoObject.video = this.GLOBAL.baseFilePath + this.video.video;
          this.player.newVideo(this.videoObject);
          this.getRelate(
            this.video.title,
            this.video.type1Id,
            this.video.type2Id,
          );
        });
    },
    //获取评论列表
    getCommentList() {
      this.axios
        .post("comment/list", {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          id: this.id
        })
        .then(res => {
          this.comments = res.data.page.list;
          this.totalRow = res.data.page.totalRow;
        });
    },
    //提交评论
    submitComment() {
      if (localStorage.getItem("userData") === "undefined") return;
      this.form.userId = JSON.parse(localStorage.getItem("userData")).id;
      if (!this.form.userId) {
        this.$message.error("您还未登录，请登录!");
        return;
      }
      console.log(this.form.content);
      if (this.form.content.length < 5) {
        this.$message.error("评论至少5个字符!");
        return;
      }
      this.form.videoId = this.id;

      this.axios.post("comment/add", this.form).then(res => {
        if (res.data.success) {
          this.$message.success("发表评论成功!");
          this.getCommentList();
          this.form.content=""
        }
      });
    },
    //收藏操作
    collect(flag) {
      this.axios
        .post("collect", {
          videoId: this.video.id,
          userId: this.user.id,
          flag: flag
        })
        .then(res => {
          if (res.data.success) {
            this.isCollect = flag == 1;
            this.getCollectNum();
          }
        });
    },
    //获取收藏数量
    getCollectNum() {
      this.axios
        .post("video/getCollectNum", {
          id: this.video.id
        })
        .then(res => {
          this.collectNum = res.data.collectNum;
        });
    },
    //点赞操作
    praise(flag) {
      this.axios
        .post("video/praise", {
          videoId: this.video.id,
          userId: this.user.id,
          flag: flag
        })
        .then(res => {
          if (res.data.success) {
            this.isPraise = flag == 1;
            this.getPraiseNum();
          }
        });
    },
    //获取点赞数
    getPraiseNum() {
      this.axios
        .post("video/getPraiseNum", {
          id: this.video.id
        })
        .then(res => {
          this.praiseNum = res.data.praiseNum;
        });
    },
    //添加到历史列表，如果观看超过30s
    addHistoryList() {
      setTimeout(() => {
        this.axios.post(
          "video/playHistory",
          {
            videoId: this.id,
            userId: this.user.id
          },
          1000
        );
      });
    },
    //获取相关推荐数据
    getRelate(title, type1Id, type2Id) {
      this.axios
        .post("video/relate", {
          title: title,
          type1Id: type1Id,
          type2Id: type2Id,
          pageSize: 20
        })
        .then(res => {
          console.log("relate", res.data.page.list);
          this.relates = res.data.page.list;
        });
    },
    //跳转播放
    toPlay: function(id) {
      let routeData = this.$router.resolve({
        name: "play",
        query: { id: id }
      });
      window.open(routeData.href, "_blank");
    }
  },
  watch: {
    pageNumber: function() {
      this.getCommentList();
    },
    "form.content": function(val) {
      console.log(val);
    }
  },
  computed: {
    user: function() {
      return this.$store.state.user ? this.$store.state.user : {};
    }
  }
};
</script>

<style lang="scss" scoped>
.my-play {
  font-size: 12px;
  /* 左边开始 */
  .left {
    /* 左边头部*/
    .left-top {
      color: #909399;
      /* 标题 */
      .title {
        color: #303133;
        font-size: 18px;
        padding: 0;
        margin: 0;
        line-height: 40px;
      }
      /* 描述1 */
      .detail-1 {
        line-height: 20px;
        span {
          margin-right: 20px;
        }
      }
      /* 描述2 */
      .detail-2 {
        line-height: 20px;
        margin-bottom: 10px;
        span {
          margin-right: 20px;
        }
      }
      /* 播放器 */
      .player {
        background: #000;
        //padding: 30px 0;
        width: 100%;
        height: 550px;
        video {
          border: 0;
          &:focus {
            outline: none;
          }
        }
      }
      .opt {
        ul {
          display: flex;
          margin-right: 0;
          padding: 0px 0px 15px 0px;
          border-bottom: 1px solid #dcdfe6;
          li {
            margin-left: 20px;
          }
        }
        .opt-btn {
          &:hover {
            cursor: pointer;
          }
        }
      }
      .detail-title {
        font-size: 14px;
        color: #606266;
      }
    }
    /* 左边头部结束 */
    /*左边下部分开始*/
    .comment {
      .comment-header {
        border-bottom: 1px solid #dcdfe6;
        padding-bottom: 10px;
        .title {
          font-size: 16px;
        }
      }
      /* 头像单独抽离出来，因为评论列表也要用 */
      .comment-photo {
        margin: 0 auto;
        height: 50px;
        width: 50px;
        border-radius: 25px;
        overflow: hidden;
      }
      .comment-send {
        margin: 15px 0 0 0;
        .send-right {
          position: relative;
          // margin-right: 80px;
        }
      }
    }

    /*评论列表*/
    .comment-list {
      padding-top: 30px;
      border-bottom: 1px solid #dcdfe6;
      /* 评论项 */
      .comment-item {
        //border-bottom: 1px solid #dcdfe6;
        /*用户名*/
        margin-bottom: 26px;
        .item-detail {
          .username {
            color: #606266;
            margin-right: 10px;
            line-height: 30px;
          }
          .level {
            font-size: 11px;
            color: #909399;
          }
          .content {
            margin: 10px 0;
          }
          .comment-detail {
            border-bottom: 1px solid #dcdfe6;
            padding-bottom: 10px;
            color: #909399;
            span {
              margin: 0 12px 0 0;
            }
            a {
              color: #909399;
              &:hover {
                color: #79bbff;
              }
            }
          }
        }
      }
    }
    /*评论列表结束*/
  }
  /* 左边结束 recommended-item */
  .recommended {
    margin-left: 20px;
    margin-top: 90px;
    .recommended-title {
      background-color: #ebeef5;
      font-size: 16px;
      line-height: 45px;
      padding-left: 5px;
    }
    .recommended-item {
      cursor: pointer;
      color: #909399;
      display: flex;
      margin-top: 10px;
      .img {
        width: 142px;
        height: 80px;
      }
      p {
        margin: 0;
      }
      .detail {
        padding: 5px 0 0 10px;
        .title {
          width: 140px;
          font-size: 14px;
          color: #303133;
          height: 40px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  img {
    height: 100%;
    width: 100%;
  }
  .rate{
    display: flex;
    color: #909399
  }
}
</style>